<template>
  <el-dialog :model-value="dialogVisible" :z-index="1000" width="80%" title="请选择房间" :before-close="handleClose" draggable>
    <div class="content">
      <div class="group">
        <div class="tree">
          <ZTree :id="treeId" :api="getRoomMapTree" @click-dom="zTreeOnClick" />
        </div>
      </div>
      <div class="main">
        <div class="table-box" v-loading="loading">
          <ProTable
            ref="proTable"
            title="人员列表"
            rowKey="roomName"
            :columns="columns"
            :request-api="getTableList"
            :data-callback="dataCallback"
            :tool-button="false"
            :select="_select"
            :click-row="_clickRow"
            :all-select-disabled="true"
            :small="true"
            v-if="roomMapid"
          >
            <!-- Expand -->
            <template #expand="scope">
              {{ scope.row }}
            </template>
          </ProTable>
        </div>
      </div>
    </div>
    <template #footer>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="tsx" name="RoomDialog">
/* eslint-disable */
// @ts-nocheck
import { onMounted, ref, watch, h, nextTick } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import ZTree from "@/components/ZTree/index.vue";
import { getRoomMapTree } from "@/api/modules/common";
import EmployeeDrawer from "./components/EmployeeDrawer.vue";
import { msgMap } from "@/config/index";
import dayjs from "dayjs";
import { getRoomList } from "@/api/modules/smartLock/empower/cardholder";
import { ElMessage } from "element-plus";

const treeId = ref("tree");
const loading = ref(false);
const roomMapid = ref("");
const proTable = ref();
const curRoom = ref({});

const dataCallback = (data: any) => {
  const { records, page } = data;
  loading.value = false;
  return {
    list: records || [],
    total: page.total
  };
};

const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  loading.value = true;
  return getRoomList({ ...newParams, mapndxs: roomMapid.value });
};

const columns: any = [
  { type: "selection", fixed: "left", width: 60 },
  {
    prop: "clause",
    label: "描述",
    isShow: false,
    search: { el: "input" }
  },
  {
    prop: "hotelName",
    label: "区域"
  },
  {
    prop: "roomName",
    label: "房间名称"
  },
  {
    prop: "roomCode",
    label: "房间号"
  }
];

const props = defineProps<{
  dialogVisible: boolean;
  handleClose: () => void;
  submitCallback: (curRoom: { roomName: string; roomId: string }) => Promise<void>;
}>();

/**
 * 多选框选择
 */
const _select = (selection, row) => {
  const selectedList = proTable.value.element.getSelectionRows();
  const isSel = selectedList.some(item => item.roomId === row.roomId);
  const lastSelItem = selection.shift();
  if (selection.length) {
    proTable.value.element.toggleRowSelection(lastSelItem, false);
  }
  curRoom.value = isSel ? row : {};
};

/**
 * 单击行
 */
const _clickRow = row => {
  const selectedList = proTable.value.element.getSelectionRows();
  const isSel = selectedList.some(item => item.roomId === row.roomId);
  proTable.value.clearSelection();
  proTable.value.element.toggleRowSelection(row, isSel ? false : true);
  curRoom.value = !isSel ? row : {};
};

/**
 * 提交信息
 */
const handleSubmit = async () => {
  props.submitCallback(curRoom.value);
};

/**
 * 点击树节点
 */
function zTreeOnClick({ ids }) {
  roomMapid.value = ids;
  proTable.value && proTable.value.getTableList();
}
</script>
<style lang="scss" scoped>
@import "@/styles/custom.scss";
.content {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 80vh;
}
.group {
  width: 320px;
  height: 100%;
  padding: 0 15px;
  margin-right: 10px;
  background: #ffffff;
  border-radius: 5px;
  .tree {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 10px 0;
    overflow-y: auto;
  }
}
.main {
  display: flex;
  flex: 1;
  flex-flow: column;
  width: 0;
  height: 100%;
  background: #ffffff;
  border-radius: 5px;
  .table-box {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
}
</style>
